<template>
  <view class="container">
    <!-- 顶部标题区域 -->
    <view class="header">
      <!-- <text class="header-title">口语交际对话练习</text> -->
    </view>
    <view v-for="(item, index) in dataList" :key="index" v-if="index === currentIndex">
      <h3>{{ index + 1 }}/{{ dataList.length }}</h3>
	  <u-row customStyle="margin-bottom: 10px">
		  <u-col span="6">
			 <!-- 人物1区域 -->
			 <view class="character-part character1">
			   <!-- <image class="character-image" :src="item.character1ImageSrc" mode="aspectFit"></image> -->
			   <view class="bubble character1-bubble">
			     <text class="bubble-text">{{ item.character1Text }}</text>
			   </view>
			   <view class="audio-button" @click="playCharacter1Audio(item.character1AudioSrc)">
			     <text class="audio-label">播放音频</text>
			   </view>
			 </view>
		  </u-col>
		  <u-col span="6">
			<!-- 人物2区域 -->
			<view class="character-part character2">
			  <!-- <image class="character-image" :src="item.character2ImageSrc" mode="aspectFit"></image> -->
			  <view class="bubble character2-bubble">
			    <text class="bubble-text">{{ item.character2Text }}</text>
			  </view>
			  <view class="record-button" @click="startRecord(item)" :class="{ 'disabled': isRecording }">
			    <text class="record-label">{{ isRecording? '正在录音...' : '开始录音' }}</text>
			  </view>
			  <view class="stop-button" @click="stopRecord(item)" :class="{ 'disabled':!isRecording }">
			    <text class="stop-label">停止录音</text>
			  </view>
			  <view class="play-recorded-button" @click="playRecordedAudio(item)" :class="{ 'disabled':!item.recordedFilePath }">
			    <!-- <image src="/static/play-recorded.png" class="play-recorded-icon"></image> -->
			    <text class="play-recorded-label">播放录音</text>
			  </view>
			</view>
		  </u-col>
	  </u-row>
     
      <!-- 查看标准答案按钮 -->
      <view class="answer-button" @click="checkAnswer(item)" :class="{ 'disabled':!item.recordedFilePath }">
        <text class="answer-label">查看标准答案</text>
      </view>
    </view>
    <view class="next-button" @click="nextItem">
      <text class="next-label">下一个</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          character1ImageSrc: '/static/character1-1.png', // 人物1的图片地址
          character1Text: 'Hello, how are you?',
          character1AudioSrc: '',
          character2ImageSrc: '/static/character2-1.png', // 人物2的图片地址
          character2Text: '',
          recordedFilePath: '',
          answerKeywords: ['fine', 'good', 'great'] // 标准答案关键词
        },
        {
          character1ImageSrc: '/static/character1-2.png',
          character1Text: 'What is your name?',
          character1AudioSrc: '',
          character2ImageSrc: '/static/character2-2.png',
          character2Text: '',
          recordedFilePath: '',
          answerKeywords: ['John', 'Jane', 'Mike'] 
        },
        {
          character1ImageSrc: '/static/character1-3.png',
          character1Text: 'Where are you from?',
          character1AudioSrc: '',
          character2ImageSrc: '/static/character2-3.png',
          character2Text: '',
          recordedFilePath: '',
          answerKeywords: ['China', 'USA', 'UK'] 
        },
        {
          character1ImageSrc: '/static/character1-4.png',
          character1Text: 'How old are you?',
          character1AudioSrc: '',
          character2ImageSrc: '/static/character2-4.png',
          character2Text: '',
          recordedFilePath: '',
          answerKeywords: ['20', '25', '30'] 
        }
      ],
      currentIndex: 0,
      recorder: null,
      isRecording: false
    };
  },
  methods: {
    playCharacter1Audio(audioSrc) {
      uni.playVoice({
        filePath: audioSrc
      });
    },
    startRecord(item) {
      if (this.isRecording) return;
      this.recorder = uni.getRecorderManager();
      const options = {
        duration: 10000,
        sampleRate: 16000,
        numberOfChannels: 1,
        encodeBitRate: 96000,
        format: 'mp3',
        frameSize: 512
      };
      this.recorder.start(options);
      this.recorder.onStart(() => {
        this.isRecording = true;
        console.log('开始录音');
      });
      this.recorder.onError((err) => {
        console.log('录音错误', err);
      });
    },
    stopRecord(item) {
      if (!this.isRecording) return;
      this.recorder.stop();
      this.recorder.onStop((res) => {
        this.isRecording = false;
        item.recordedFilePath = res.tempFilePath;
        console.log('录音停止，文件路径：', res.tempFilePath);
      });
    },
    playRecordedAudio(item) {
      if (item.recordedFilePath) {
        uni.playVoice({
          filePath: item.recordedFilePath
        });
      }
    },
    checkAnswer(item) {
      // 简单的关键词比对，实际应用中可使用更复杂的语音识别和自然语言处理技术
      let recordedText = this.getRecordedText(item.recordedFilePath); 
      let isCorrect = this.checkKeywords(item.answerKeywords, recordedText);
      if (isCorrect) {
        uni.showToast({
          title: '回答正确',
          icon: 'success',
          duration: 2000
        });
      } else {
        uni.showToast({
          title: '继续努力',
          icon: 'none',
          duration: 2000
        });
      }
      // 依次播放两个人物的音频
      this.playCharacter1Audio(item.character1AudioSrc);
      this.playRecordedAudio(item);
    },
    getRecordedText(filePath) {
      // 这里需要根据实际情况实现从文件路径中提取文本的功能，可能需要调用语音识别 API
      // 以下是一个示例，实际可能无法直接这样使用，仅供示意
      return filePath.split('/').pop().replace('.mp3', ''); 
    },
    checkKeywords(keywords, recordedText) {
      for (let keyword of keywords) {
        if (recordedText.includes(keyword)) {
          return true;
        }
      }
      return false;
    },
    nextItem() {
      // 切换到下一个数据项
      this.currentIndex = (this.currentIndex + 1) % this.dataList.length;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f4f4f4;
  /* display: flex;
  flex-direction: row;
  justify-content: space-around; */
  height: auto;
  width: 100%;
}

.header {
  text-align: center;
  width: 100%;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 48rpx; 
  font-weight: bold;
  color: #333;
}

.character-part {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* width: 45%; */
}

.character-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.bubble {
  padding: 20rpx;
  border-radius: 20rpx;
  max-width: 80%; 
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
}

.character1-bubble {
  background-color: #dcf8c6; 
  align-self: flex-start; 
}

.character2-bubble {
  background-color: #aed6f1; 
  align-self: flex-end; 
}

.bubble-text {
  font-size: 36rpx; 
  line-height: 1.5;
  color: #333;
}

.button-part {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.audio-button,
.record-button,
.stop-button,
.play-recorded-button,
.answer-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #007aff;
  padding: 30rpx 60rpx; 
  border-radius: 16rpx; 
  margin-bottom: 40rpx; 
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
}

.audio-button.disabled,
.record-button.disabled,
.stop-button.disabled,
.play-recorded-button.disabled,
.answer-button.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.audio-icon,
.record-icon,
.stop-icon,
.play-recorded-icon,
.answer-icon {
  width: 80rpx; 
  height: 80rpx; 
  margin-bottom: 20rpx; 
}

.audio-label,
.record-label,
.stop-label,
.play-recorded-label,
.answer-label {
  color: #fff;
  font-size: 32rpx; 
}

.audio-button:hover,
.record-button:hover,
.stop-button:hover,
.play-recorded-button:hover,
.answer-button:hover {
  background-color: #0056b3;
}

.next-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #007aff;
  padding: 30rpx 60rpx; 
  border-radius: 16rpx; 
  margin-bottom: 40rpx; 
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
}

.next-label {
  color: #fff;
  font-size: 32rpx; 
}

.next-button:hover {
  background-color: #0056b3;
}
</style>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
</style>
<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
</style>